<template>
  <div class="lk-serch">
    <img src="../assets/logo.png" @click="sy()">
    <div class="lk-serch-middle"><input type="text" name="" id="" value="" placeholder="请输入关键字进行搜索"/><img
      src="../assets/serchbtn.png"/>
      <!--搜索框-->
      <div class="lk-serch-middle-hot">
        <span>热门：</span>
        <i v-for="item in arr">{{item}}</i>

      </div>

    </div>
    <!--按钮-->
    <div class="lk-serch-btn">
      <a href="#/oneCenter" @click="gr()"><img src="../assets/grzx.png"/>个人中心</a>
      <a href="#/shoppingcart"><img src="../assets/gwc.png"/>购物车</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "serch",
    data() {
      return {
        arr: ['饭粗好', '辣椒酱', '水果礼盒', '擦玻璃', '蟹肉棒', '燕麦片']
      }
    },
    mounted() {

    },
    methods: {
      sy() {
        window.location.href = 'http://localhost:8080/#/'
      },
      gr() {
        $(function () {
            $('.lk-ngt-li').removeClass('lk-ngt-li');
          }
       )
      }
    }
  }
</script>

<style scoped>
  .lk-serch {
    width: 1280px;
    height: 92px;
    margin: 25px auto 0;
    overflow: hidden;
  }

  .lk-serch > img {
    float: left;
    cursor: pointer;
  }

  .lk-serch-middle {
    overflow: hidden;
    margin: 25px 0 0 100px;
    display: inline-block;
    float: left;
  }

  .lk-serch-middle > input {
    width: 431px;
    height: 36px;
    float: left;
    padding: 0 10px;
    border: 2px solid #4b943d;
  }

  .lk-serch-middle > img {
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin-top: -4px;
    margin-left: -6px;
    cursor: pointer;
  }

  .lk-serch-middle-hot {
    margin-top: 5px;
    font-size: 14px;
    color: rgb(109, 109, 112);
  }

  .lk-serch-middle-hot > i {
    cursor: pointer;
    font-size: 14px;
    color: rgb(109, 109, 112);
    padding: 0 5px;
  }

  .lk-serch-btn {
    display: inline-block;
    float: right;
    margin: 25px 0 0 20px;
  }

  .lk-serch-btn img {
    vertical-align: middle;
    margin-right: 5px;
  }

  .lk-serch-btn > a {
    display: inline-block;
    width: 123px;
    height: 40px;
    margin-left: 20px;
    line-height: 40px;
    text-align: center;
    background-color: #F8F8F6;
    border: solid 1px #E5E5E5;
    color: #666666;
  }
</style>
